<template>
  <t-popup v-model:visible="show" position="top" trigger="click" show-arrow>
    <t-button theme="primary" variant="text" @click="showIndex()">
      <template #icon>
        <icon-up v-if="show" style="margin: 5px" />
        <icon-down v-else style="margin: 5px" />
      </template>
      <span style="user-select: none">{{ label }}</span>
    </t-button>
    <template #content>
      <div class="data-browse-pull-down-panel">
        <t-empty v-if="indices.length === 0" description="请选择链接" style="padding-top: 150px" />
        <div v-else class="data-browse-pull-down-index">
          <t-input
            ref="dataBrowsePullDownSearch"
            v-model="keyword"
            class="data-browse-pull-down-search"
            allow-clear
          />
          <div class="h-358px overflow-auto w-400px mt-5px">
            <div
              v-if="customIndex"
              class="data-browse-list-item"
              :class="customIndex.value === index ? 'data-browse-list-item-this' : ''"
              @click="indexChange(customIndex!.value)"
            >
              <span>{{ customIndex!.label }}</span>
              <t-tag theme="warning">自定义</t-tag>
            </div>
            <div
              v-for="item in items"
              :key="item.value"
              class="data-browse-list-item"
              :class="item.value === index ? 'data-browse-list-item-this' : ''"
              @click="indexChange(item.value)"
            >
              <span>{{ item.label }}</span>
              <t-tag v-if="item.tag === 'index'" theme="primary">索引</t-tag>
              <t-tag v-else-if="item.tag === 'alias'" theme="success">别名</t-tag>
            </div>
          </div>
        </div>
      </div>
    </template>
  </t-popup>
</template>
<script lang="ts" setup>
import { IndexOption, useIndexStore } from "@/store";
import { useFuse } from "@vueuse/integrations/useFuse";
import { UseDataBrowserInstance } from "@/hooks";

const props = defineProps({
  tab: {
    type: Object as PropType<UseDataBrowserInstance>,
    required: true
  }
});

const { index, changeIndex } = props.tab;

const keyword = ref("");
const show = ref(false);
const dataBrowsePullDownSearch = ref<HTMLDivElement | null>(null);
const customIndex = ref<IndexOption>();

const indices = computed(() => useIndexStore().indexOptions);
const { results } = useFuse(keyword, indices, {
  matchAllWhenSearchEmpty: true,
  fuseOptions: {
    keys: [
      {
        name: "name"
      }
    ]
  }
});
const items = computed(() => results.value.map((e) => e.item));
const label = computed(() => {
  return indices.value.find((e) => e.value === index.value)?.label || "未选择索引";
});

watch(keyword, (value) => {
  if (value === "") {
    customIndex.value = undefined;
    return;
  }
  if (indices.value.some((e) => e.value.includes(value))) {
    // 存在索引包含关键字
    customIndex.value = undefined;
    return;
  }
  customIndex.value = {
    label: value,
    value: value,
    tag: "custom"
  };
});

function showIndex() {
  if (show.value) {
    // 聚焦
    nextTick(() => {
      dataBrowsePullDownSearch.value?.focus();
      nextTick(() => {
        let element = document.querySelector(".data-browse-list-item-this");
        if (element) {
          element.scrollIntoView({
            behavior: "smooth"
          });
        }
      });
    });
  }
}

function indexChange(res: string) {
  show.value = false;
  changeIndex(res);
}
</script>
<style lang="less">
// 下拉列表

.data-browse-pull-down-panel {
  width: 400px;
  height: 400px;

  .data-browse-pull-down-index {
    width: 400px;
    height: 400px;

    .data-browse-pull-down-search {
      width: 390px;
      margin-left: 5px;
    }
  }

  .data-browse-list-item {
    width: 368px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid var(--td-border-level-2-color);
    cursor: pointer;
    overflow: hidden;
    padding: 0 16px;
    transition: background-color 0.3s ease-in-out;

    &:hover {
      background-color: var(--td-bg-color-container-hover);
    }

    .arco-tag {
      margin: 8px 4px;
    }
  }

  .data-browse-list-item-this {
    color: var(--td-text-color-secondary);
    background-color: var(--td-bg-color-container-active);
    &:hover {
      background-color: var(--td-bg-color-container-active);
    }
  }
}
</style>
